<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>图例</span>
            </div>
            <el-checkbox-group class="check-box-group" :value = "checkedList" >
                <div v-for="item in dataList" class="check-box-item" :key="item.value">
                    <el-checkbox  :value="item.value" :label="item.label" @change="handleClick(item)"></el-checkbox>
                </div>
            </el-checkbox-group>
        </el-card>

    </div>
</template>

<script>
const dataList = [
    {label:"公司",value:0},
    {label:"工地",value:1},
    {label:"汽车",value:2},
    {label:"储料罐",value:3},
]
export default {
    name: "MapLegend",
    data() {
        return {
            dataList,
            checkList:[]
        }
    },
    created() {
        this.checkList = this.value.map(item =>this.dataList.find(subItem => subItem.value === item).label)
    },
    // watch: {
    //     checkList(newValue) {
    //         this.$emit("change",newValue.map(item =>this.dataList.find(subItem => subItem.label === item).value));
    //         // // 判断这个值和之前的有没有变化
    //         // const valList = newValue.map(item => this.dataList.find(subItem => subItem.label === item).value);
    //         // // 判断valList的值和this.value是不是一样
    //         //
    //         // if (!(valList.length === this.value.length && valList.some(item => this.value.includes(item)))) {
    //         //     // 一样的
    //         //     this.$emit("change",newValue.map(item =>this.dataList.find(subItem => subItem.label === item).value));
    //         // }
    //     },
    //     value() {
    //         // const labelList = newValue.map(item =>this.dataList.find(subItem => subItem.value === item).label)
    //         //
    //         // if (!(labelList.length === this.value.length && labelList.some(item => this.checkList.includes(item))) ){
    //         //     // 一样的
    //         //     this.checkList = newValue.map(item =>this.dataList.find(subItem => subItem.value === item).label)
    //         // }
    //     },
    // },
    computed: {
        checkedList() {
            if (this.value) {
               return this.value.map(item =>this.dataList.find(subItem => subItem.value === item).label)
            }else {
                return []
            }
        },
    },
    props: {
        value:Array
    },
    model: {
        prop:"value",
        event:"change"
    },
    methods:{
        handleChange() {
            // this.$emit("change",updateCheckedList.map(item =>this.dataList.find(subItem => subItem.label === item).value))
        },
        handleClick(item) {
            const values= this.value.concat();
            if (values.includes(item.value)) {
                values.splice(values.indexOf(item.value),1)
            }else {
                values.push(item.value)
            }
            // 值会发生改变的时候
            this.$emit("change",values);
        },
    }
}
</script>

<style scoped>
.box-card {
    width: 150px;
}

/deep/ .el-card__header {
    padding: 10px;
}

.check-box-item{
    text-align: left;
}

</style>